/**
 * Created by Freeman on 2016/12/13.
 */
import React, {Component, PropTypes} from 'react'
import {ActionSheet} from 'react-weui'
import fetchJsonp from 'fetch-jsonp'
import {observer} from 'mobx-react'
import '../styles/Album.css'
import icon_back from '../assets/icon-back.svg'
import icon_play from '../assets/icon-play.png'
import icon_black from '../assets/icon-...black.png'
@observer
class Album extends Component {
  constructor(props) {
    super(props)
    this.showMenu = this.showMenu.bind(this)
    this.hideMenu = this.hideMenu.bind(this)
    this.state = {
      album: null,
      menuShow: false,
      menuedIndex: 0,
      auto_show: false,
      menus: [{
        label: '拍照',
        onClick: () => {
        }
      }, {
        label: '从手机相册选择',
        onClick: () => {
        }
      }],
      actions: [
        {
          label: '取消',
          onClick: this.hideMenu
        }
      ],
    }
  }

  showMenu(index) {
    const {musicStore} = this.props
    this.setState({
      menus: [{
        label: '下一首播放',
        onClick: () => {
          musicStore.addToPlayListAsNextPlay({
            id: this.state.album.list[index].songid,
            mid: this.state.album.list[index].songmid,
            name: this.state.album.list[index].songorig,
            singer: this.state.album.list[index].singer[0].name
          })
          this.hideMenu()
        }
      }, {
        label: '添加到播放列表',
        onClick: () => {
          musicStore.addToPlayList({
            id: this.state.album.list[index].songid,
            mid: this.state.album.list[index].songmid,
            name: this.state.album.list[index].songorig,
            singer: this.state.album.list[index].singer[0].name
          })
          this.hideMenu()
        }
      }],
      auto_show: true
    })
  }

  hideMenu() {
    this.setState({
      auto_show: false
    })
  }

  componentDidMount() {
    const {mid} = this.props
    fetchJsonp(`http://c.y.qq.com/v8/fcg-bin/fcg_v8_album_info_cp.fcg?albummid=${mid}&g_tk=5381&loginUin=0&hostUin=0&format=jsonp&inCharset=utf8&outCharset=utf-8&notice=0&platform=yqq&needNewCode=0`, {
      jsonpCallback: 'jsonpCallback'
    })
      .then(res => res.json())
      .then((response) => {
        this.setState({
          album: response.data
        })
      })
  }

  render() {
    const {mid} = this.props
    return (
      <div className="album">
        <div className="album-header play-list-page-header">
          <div className="back-button">
            <div className="back-icon">
              <img src={icon_back}/>
            </div>
            <div className="back-text">
              专辑
            </div>
          </div>
        </div>
        {
          this.state.album &&
          <div className="play-list-page">
            <img className="blurbg " src={`http://y.gtimg.cn/music/photo_new/T002R300x300M000${mid}.jpg?max_age=2592000`}/>
            <div className="play-list-info  border-1px border-1px-after">
              <div className="play-list-photo">
                <div className="play-button">
                  <img src={icon_play}/>
                </div>
                <img src={`http://y.gtimg.cn/music/photo_new/T002R300x300M000${mid}.jpg?max_age=2592000`}/>
              </div>
              <div className="play-list-text">
                <p className="play-list-name">{this.state.album.name}
                  <span className="play-list-num">-{this.state.album.singername}</span>
                </p>
                <p className="play-list-num">{this.state.album.list.length}首歌曲</p>
                <p className="play-list-num">{this.state.album.genre}&nbsp;&nbsp;{this.state.album.lan}</p>
                <p className="play-list-num">发行时间:{this.state.album.aDate}</p>
                <p className="play-list-num">唱片公司:{this.state.album.company}</p>
              </div>
            </div>

            <div className="m-list">
              <ul>
                {
                  this.state.album.list.map((song, index) => (
                    <li className="border-1px border-1px-after list-item" key={index}>
                      <div className="music-info">
                        <p className="music-name">{song.songorig}</p>
                        <p className="music-author">
                          {
                            song.singer.map(singer => (
                              <span key={singer.name}>{singer.name}</span>
                            ))
                          }
                          <span>{song.albumdesc}</span>
                        </p>
                      </div>
                      <div className="action-button" onClick={()=>this.showMenu(index)} onTouchEnd={()=>this.showMenu(index)}>
                        <img src={icon_black}/>
                      </div>
                    </li>
                  ))
                }
              </ul>
            </div>
          </div>
        }

        <ActionSheet
          menus={this.state.menus}
          actions={this.state.actions}
          show={this.state.auto_show}
          type="ios"
          onRequestClose={e => this.setState({ios_show: false})}
        />
      </div>
    )
  }
}
Album.propTypes = {
  mid: PropTypes.string.isRequired,
  musicStore: PropTypes.object.isRequired
}

export default Album